<template>
    <div class="main">
      <p  class="main_text">
        登录日志管理
      </p>
        <!-- ############################################## 查询 ############################################## -->
        <div class="top mb20 p20">
            <el-form :model="searchData" class='df fww'>
                <el-form-item label="公司名：">
                    <el-input v-model="searchData.companyName" placeholder="公司名" class="mr20" style="width: 140px" clearable @input="searchBtn"/>
                </el-form-item>
                <el-form-item label="登陆人：">
                    <el-input v-model="searchData.name" placeholder="登陆人" class="mr20" style="width: 140px" clearable @input="searchBtn"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchBtn">查询</el-button>
                    <el-button type="primary" plain @click="resetBtn">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- #################################### 表单 #################################### -->
        <div class="cyr-flex">
            <el-button type="danger" plain @click="AllDelete" style="width: fit-content;">批量删除</el-button>
            <el-table @selection-change="handleSelectionChange" :data="tableData"  class="mt20"
                :header-cell-style="{ background: '#f0f6fe' }"  :show-overflow-tooltip="true" v-adaptive border>
                <el-table-column type="selection" width="50" />
                <el-table-column label="登录时间" prop="loginD"  :show-overflow-tooltip="true" />
                <el-table-column label="登录公司" prop="companyName"  :show-overflow-tooltip="true" />
                <el-table-column label="登录人" prop="name"  :show-overflow-tooltip="true" />
                <!-- <el-table-column label="登录类型" prop="userType" /> -->
                <el-table-column label="登录类型">
                    <template #default="props">
                        <el-tag v-if="props.row.userType == 'E'">员工</el-tag>
                        <el-tag v-if="props.row.userType == 'C'" type="success">消费者</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="登录模式">
                    <template #default="props">
                        <el-tag v-if="props.row.result == 'S'">账号登陆</el-tag>
                        <el-tag v-if="props.row.result == 'B'" type="success">第三方</el-tag>
                        <el-tag v-if="props.row.result == 'M'" type="success">短信验证码</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="登录平台" prop="deviceInfo"  :show-overflow-tooltip="true" />
                <el-table-column label="登录结果" prop="resultDesc" />
                <el-table-column label="IP" prop="address"  :show-overflow-tooltip="true" />
                <el-table-column label="操作类型">
                    <template #default="props">
                        <el-tag v-if="props.row.action == 'L'">登录</el-tag>
                        <el-tag v-else-if="props.row.action == 'R'" type="success">切换角色</el-tag>
                        <el-tag v-else type="info">切换组织结构</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="80">
                    <template #default="props">
                        <el-button size="small" link type="danger" @click="del(props.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- #################################### 分页 #################################### -->
            <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
            @change="handleSizeChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { formatTime } from '../../../filters/index'
import {
    RequestLoginLogGetlistlimit,
    RequestLoginLogDel,
    RequestloginLogDeleteList,
} from '@/api/path/index.js'
const inquireData = ref<any>({
    value1: '',
    resource: '',
    name: '',
})
const tableData = ref<any>([])
const searchData = ref<any>({
    name: '',
    companyName: ''
})
const searchBtn = () => {
    currentPage.value = 1
    getData()
}
const resetBtn = () => {
    currentPage.value = 1
    searchData.value.name = null
    searchData.value.companyName = null
    getData()
}
/* ************************ 分页获取数据 ************************ */
const total = ref<any>(10)
const currentPage = ref(1)
const pageSize = ref(10)
const getData = async () => {
    RequestLoginLogGetlistlimit({
        rows: pageSize.value,
        name: searchData.value.name,
        companyName: searchData.value.companyName,
        page: currentPage.value,
    }).then((res: any) => {
        tableData.value = res.resultObj.data
        res.resultObj.data.forEach((item: any) => {
            item.loginD = formatTime(item.loginD)
        })
        total.value = res.resultObj.total
    })
}
getData()
const handleSizeChange = (val: number) => {
    // console.log(`${val} items per page`)
    getData()
}
const handleCurrentChange = (val: number) => {
    // console.log(`current page: ${val}`)
    getData()
}
/* ************************ 删除 ************************ */
const del = (id: any) => {
    RequestLoginLogDel(id).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* ************************ 批量删除 ************************ */
const ids = ref<any>([])
const handleSelectionChange = (val: any) => {
    val.forEach((item: any) => ids.value.push(item.id))
}
const AllDelete = () => {
    const formimgs = new FormData()
    formimgs.append('ids', ids.value)
    RequestloginLogDeleteList(formimgs).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
    .top {
        width: 100%;
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;
    }
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    .el-icon svg {
        color: #fff;
    }
}
</style>
